<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet" href="./static/muse-ui.css">
    <link rel="stylesheet" href="./static/reset.css">
    <script src="./static/vue.js"></script>
    <script src="./static/muse-ui.js"></script>
    <script src="./static/smsCode.js"></script>
    <script src="./static/vue-i18n.js"></script>
    <script src="./static/cn.js"></script>
    <script src="./static/en.js"></script>
    <script src="./static/axios.min.js"></script>
    <style>
    	.regist{min-height: 100%;}
        .sms-code{ position: relative; width: 100%;}
		.sms-code button{ position: absolute; top:-10px;margin: 0; right:0px; width: auto; height:40px; line-height: 40px;padding: 0;font-size: 12px; color: #E5AA2B; }
    </style>
</head>
<body>
<div class="regist" id="app">

    <mu-appbar :z-depth="0" class="appbar">
      <mu-button icon slot="left">
      	<span class="icon iconfont"></span>
      </mu-button>
      <div style="text-align: center;"><span>{{$t('register.register')}}</span></div>
      <mu-button  icon slot="right" >
      	<span class="icon iconfont"></span>
      </mu-button>
    </mu-appbar>
    <div class="register" style="margin-top: 50px;">
		<!--<div class="logo"><img src="static/images/logo.png" alt=""></div>-->
		<mu-form ref="form" :model="validateForm" class="login-content">
			<mu-form-item :label="$t('login.language')">
		        <mu-select v-model="validateForm.value"  @change="handleChange(validateForm.value)">
			        <mu-option :label="$t('login.chooseLanguage')" value="0"></mu-option>
			        <mu-option label="中文" value="cn"></mu-option>
			        <mu-option label="English" value="en"></mu-option>
			      </mu-select>
		      </mu-form-item>
			<mu-form-item :label="$t('register.country')" prop="country">
				<mu-select v-model="validateForm.country">
					<mu-option v-for="option,index in options" :key="index" :label="option.value" :value="option.key"></mu-option>
				</mu-select>
			</mu-form-item>
			<mu-form-item :label="$t('login.mobile')" prop="username" :rules="usernameRules">
				<mu-text-field :placeholder="$t('login.enterPhone')" v-model="validateForm.username" prop="username"></mu-text-field>
			</mu-form-item>
			<mu-form-item :label="$t('forget.yzm')" prop="smscode" :rules="smscodeRules">
				<sms-code v-model="validateForm.smscode" :phone="validateForm.username" @code="getCode" prop="smscode"></sms-code>
			</mu-form-item>
			<mu-form-item :label="$t('login.password')" prop="password" :rules="passwordRules">
				<mu-text-field :placeholder="$t('login.enterPassword')" type="password" v-model="validateForm.password" prop="password"></mu-text-field>
			</mu-form-item>
			<mu-form-item :label="$t('forget.passwords')" prop="password2" :rules="password2Rules">
				<mu-text-field :placeholder="$t('register.loginpassworderr')" type="password" v-model="validateForm.password2" prop="password2"></mu-text-field>
			</mu-form-item>
			<mu-form-item :label="$t('register.tradepassword')" prop="pay_pwd" :rules="payPasswordRules">
				<mu-text-field :placeholder="$t('register.enterTradepassword')" type="password" v-model="validateForm.pay_pwd" prop="pay_pwd"></mu-text-field>
			</mu-form-item>
			<mu-form-item :label="$t('forget.passwords')" prop="pay_pwd2" :rules="payPassword2Rules">
				<mu-text-field :placeholder="$t('register.tradepassworderr')" type="password" v-model="validateForm.pay_pwd2" prop="pay_pwd2"></mu-text-field>
			</mu-form-item>
			<mu-form-item :label="$t('register.invitationcode')" prop="invitecode" :rules="invitecodeRules">
				<mu-text-field :placeholder="$t('register.enterinvitationcode')" v-model="validateForm.invitecode" prop="invitecode"></mu-text-field>
			</mu-form-item>
			<mu-form-item>
				<mu-button class="common-btn" @click="submit">{{$t('register.register')}}</mu-button>
			</mu-form-item>
		</mu-form>
		<!--<div class="login-bottom">
			{{$t('register.hasregister')}}
			<router-link to="/Login">{{$t('login.login')}}</router-link>
		</div>-->
	</div>
</div>
<script>
    Vue.use(MuseUI)
    const messages = {
		'cn': cn, // 中文语言包
		'en': en // 英文语言包
	}
	const i18n = new VueI18n({
		locale: localStorage.getItem('use_lang') ? localStorage.getItem('use_lang') : 'cn', // set locale 默认显示中文,
		messages: messages // set locale messages
	})

    var regist = new Vue({
        el: '#app',
        i18n,
        data() {
			return {
				usernameRules: [{
						validate: val => !!val,
						message: this.$t('login.enterPhone')
					},
					{
						validate: val => this.validateForm.country=='86' ? (/^[1][3-9][0-9]{9}$/.test(val)) : true,
						message: this.$t('login.phone')
					}
				],
				passwordRules: [{
						validate: val => !!val,
						message: this.$t('login.enterPassword')
					},
					{
						validate: val => val.length >= 6 && val.length <= 20,
						message: this.$t('login.passworderror')
					}
				],
				password2Rules: [{
						validate: val => !!val,
						message: this.$t('register.loginpassworderr')
					},
					{
						validate: val => val == this.validateForm.password,
						message: this.$t('register.password2Error')
					}
				],
				payPasswordRules: [{
						validate: val => !!val,
						message: this.$t('register.enterTradepassword')
					},
					{
						validate: val => val.length == 6,
						message: this.$t('register.tradeError')
					}
				],
				payPassword2Rules: [{
						validate: val => !!val,
						message: this.$t('register.tradepassworderr')
					},
					{
						validate: val => val == this.validateForm.pay_pwd,
						message: this.$t('register.trade2Error')
					}
				],
				smscodeRules: [{
					validate: val => !!val,
					message: this.$t('forget.enterYZM')
				}],
				invitecodeRules: [{
					validate: val => !!val,
					message: this.$t('register.enterinvitationcode')
				}],
				validateForm: {
					value:'0',
					country: '86',
					username: "",
					password: "",
					password2: "",
					pay_pwd: '',
					pay_pwd2: '',
					smscode: "",
					invitecode: ""
				},
				options:[],
				optionsCn: [{
						key: "86",
						value: "中国(+86)"
					},
					{
						key: "886",
						value: "台湾(+886)"
					},
					{
						key: "852",
						value: "香港(+852)"
					},
					{
						key: "1",
						value: "美国/加拿大(+1)"
					},
					{ key: "65", value: "新加坡(+65)" },
					{ key: "60", value: "马来西亚(+60)" },
					{ key: "855", value: "柬埔寨(+855)" },
				    { key: "62", value: "印度尼西亚(+62)" },
				    { key: "66", value: "泰国(+66)" }, 
				],
				optionsEn:[{ key: "86", value: "China (+86)" },
				{ key: "886", value: "Taiwan (+886)" },
				{ key: "852", value: "Hong Kong (+852)" }, 
				{ key: "1", value: "America/Canada (+1)" }, 
			    { key: "65", value: "Singapore (+65)" },
				{ key: "60", value: "Malaysia (+60)" },
				{ key: "855", value: "Kampuchea (Cambodia) (+855)" },
			    { key: "62", value: "Indonesia (+62)" },
			    { key: "66", value: "Thailand (+66)" },
			    ]
			};
		},
		created() {
         	let url = window.location.href;
			let ret = url.split("=")[1];
			let newRet = ret.split("&")[0];
            this.validateForm.invitecode = newRet;
            if(localStorage.getItem('use_lang') == 'en'){
				this.options = this.optionsEn;
			}else{
				this.options = this.optionsCn;
			}
        },
		methods: {
			//1.选择语言
		    handleChange(value) {
		        this.validateForm.value = value;
		        if (value != 0) {
		            localStorage.setItem('use_lang',value);
		            location.reload();
		        }
		    },
			// 手机验证码
			getCode() {
				const formData = {
					action: 'register',
					phone: this.validateForm.username,
					area:this.validateForm.country,
				}
				if(!this.validateForm.username){
					alert(this.$t('login.enterPhone'));
					return
				}
				if(this.validateForm.country == '86'){
					if(!(/^[1][3-9][0-9]{9}$/.test(this.validateForm.username))) {
						alert(this.$t('login.phone'));
						return;
					}
				}
				axios.post("http://ay.aygj.cc/login/sendSms", formData).then(res => {
					alert(res.data.msg);
				})
			},
			submit() {
				this.$refs.form.validate().then(result => {
					if(result) {
						const formData = {
							username: this.validateForm.username,
							password: this.validateForm.password,
							code: this.validateForm.smscode,
							token: this.validateForm.pay_pwd,
							area: this.validateForm.country,
							invite_code: this.validateForm.invitecode
						};

						axios.post("http://ay.aygj.cc/login/register", formData).then(response => {
							alert(response.data.msg);
							if(response.data.status === 1) {
								document.location.href = 'http://www.cw.pub/aygj';
							}
						}).catch(err => {
							console.log(err)
						})
					}
				});
			}
		}
    })
</script>
</body>
</html>